<template>
  <div v-loading="loading">
    <el-table
      border
      :data="tableData"
      :header-cell-style="{
        'text-align': 'center',
      }"
      :cell-style="{ 'text-align': 'center' }"
      style="width: 100%"
      highlight-current-row
    >
      <el-table-column prop="id" label="id" min-width="10%"> </el-table-column>

      <el-table-column prop="name" label="房间等级" min-width="20%">
      </el-table-column>
      <el-table-column label="logo" min-width="10%">
        <template slot-scope="scope">
          <div class="slt" v-if="scope.row.logo">
            <el-popover placement="right" width="200" trigger="hover">
              <img class="tbImg1" :src="scope.row.logo.src" alt="" />
              <img
                class="tbImg"
                slot="reference"
                :src="scope.row.logo.src"
                alt=""
              />
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="star" label="星级" min-width="10%">
      </el-table-column>
      <el-table-column prop="cate" label="分类" min-width="10%">
      </el-table-column>

      <el-table-column label="操作" min-width="20%">
        <template slot-scope="scope">
          <div class="caozuo">
            <div class="handleEdit hand_cs" @click="handleEdit(scope.row)">
              修改
            </div>
            <div class="handleExamine hand_cs" @click="handleDetail(scope.row)">
              详情
            </div>
            <div class="handleDelete hand_cs" @click="handleDelete(scope.row)">
              删除
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <Pagination :page="page" @onCurrentChange="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination.vue";
import { hotelRooms } from "@/api/hotel";
export default {
  components: { Pagination },
  props: ["rowId"],
  data() {
    return {
      loading: false,
      // hotel/rooms
      tableData: [],
      page: {
        total: 0,
        pageNum: 1, // 当前页数
        pageSize: 10, // 每页的条数
      },
    };
  },
  methods: {
    async hotelRooms() {
      const { data, err } = await hotelRooms({
        hid: this.rowId,
      });
      if (err === 0) {
        this.tableData = data;
      }
    },
    handleCurrentChange(val) {},
  },
  created() {
    this.hotelRooms();
  },
};
</script>

<style lang="scss" scoped></style>
